<template>
  <div class="question">
    <div style="margin-bottom:30px">
      问题{{ index + 1 }}
      <span
        v-if="index > 0 && isOperable"
        style="float:right;color:#F56C6C;cursor:pointer"
        @click="delQuestion(index)"
        >删除</span
      >
    </div>
    <el-form :model="questionList" label-width="100px">
      <el-form-item label="问题名称" prop="content">
        <el-input
          :readonly="!isOperable"
          v-model="questionList.content"
          placeholder="请输入问题名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="选项类型">
        <el-select
          :disabled="!isOperable"
          v-model="questionList.type"
          placeholder="请选择选项类型"
          class="w220"
          @change="typeChange(questionList.type)"
        >
          <el-option label="文本" value="FILL"></el-option>
          <el-option label="单选" value="RADIO"></el-option>
          <el-option label="多选" value="CHECK_BOX"></el-option>
        </el-select>
        <!-- <el-tooltip effect="dark" content="新增选项" placement="top"> -->
          <el-button
            type="primary"
            v-if="isShow && isOperable"
            @click="addOption"
            size="medium"
            icon="el-icon-plus"
            style="margin-left:10px"
            circle
          ></el-button>
        <!-- </el-tooltip> -->
        <!-- <el-tooltip effect="dark" content="重置选项" placement="top"> -->
          <el-button
            type="success"
            v-if="isShow && isOperable"
            @click="resetOption"
            size="medium"
            icon="el-icon-refresh"
            style="margin-left:10px"
            circle
          ></el-button>
        <!-- </el-tooltip> -->
      </el-form-item>
      <template v-if="isShow">
        <template v-for="(i, k) in questionList.optionList">
          <el-form-item :label="'选项' + (k + 1)" :key="k">
            <el-input
              v-model="i.content"
              class="w220"
              :readonly="!isOperable"
            ></el-input>
            <!-- <el-tooltip effect="dark" content="删除选项" placement="top"> -->
              <el-button
                v-if="k > 1 && isOperable"
                type="danger"
                @click="delOption(k)"
                size="medium"
                icon="el-icon-delete"
                style="margin-left:10px"
                circle
              ></el-button>
            <!-- </el-tooltip> -->
          </el-form-item>
        </template>
      </template>
    </el-form>
  </div>
</template>

<script>
export default {
  content: "question",
  props: {
    questionList: {
      type: Object,
      default() {
        return {};
      }
    },
    publishStatus: {
      type: String
    },
    index: {
      type: Number
    }
  },
  data() {
    return {
      isShow: false,
      rules: {
        content: [
          { required: true, message: "请输入问题名称", trigger: "blur" }
        ]
      }
    };
  },
  computed: {
    isOperable() {
      if (this.publishStatus == "PUBLISH" || this.publishStatus == "FINISH") {
        return false;
      } else {
        return true;
      }
    }
  },
  created() {
    if (this.questionList.type == "FILL") {
      this.isShow = false;
    } else {
      this.isShow = true;
    }
  },
  methods: {
    addOption() {
      let seq = this.questionList.optionList.length + 1;
      this.questionList.optionList.push({ content: "", seq });
    },
    resetOption() {
      this.questionList.optionList = [
        { content: "", seq: 1 },
        { content: "", seq: 2 }
      ];
    },
    delOption(k) {
      this.questionList.optionList.splice(k, 1);
    },
    delQuestion(k) {
      this.$confirm("确认删除问题" + (k + 1) + "?", "提示", {
        type: "warning"
      }).then(() => {
        this.$emit("delQuestion", k);
      });
    },
    typeChange(val) {
      if (val == "FILL") {
        this.isShow = false;
      } else {
        this.isShow = true;
        this.resetOption();
      }
    }
  }
};
</script>
<style scoped>
.question {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #dcdfe6;
}
.w220 {
  width: 220px;
}
</style>
